<template>
    <div class="feinei">
      <mt-header title="旗袍分类" :fixed="isFixed">
        <router-link to="/" slot="left">
          <div class="iconfont">&#xe603;</div>
        </router-link>
        <router-link to="ShopCar" slot="right">
        <div class="shop-car iconfont">&#xe601;</div>
      </router-link>
      </mt-header>
       <div class="kong"></div>
      <tab-bar></tab-bar>
       <mt-swipe class="swipe" :auto="2000">
          <mt-swipe-item><img class="lunbo" src="../../assets/img/images/banner1.jpg"></mt-swipe-item>
          <mt-swipe-item><img class="lunbo" src="../../assets/img/images/banner2.jpg"></mt-swipe-item>
          <mt-swipe-item><img class="lunbo" src="../../assets/img/images/banner3.jpg"></mt-swipe-item>
      </mt-swipe> 
      <div class="tubox">
        <div class="tu1">
            <img class="tu1" src="../../assets/img/images/sort1.png">
            <img class="tu2" src="../../assets/img/images/sort-txt1.png">
        </div>
         <div class="tu1">
            <img class="tu1" src="../../assets/img/images/sort2.png">
            <img class="tu2" src="../../assets/img/images/sort-txt2.png">
        </div>
         <div class="tu1">
            <img class="tu1" src="../../assets/img/images/sort3.png">
            <img class="tu2" src="../../assets/img/images/sort-txt3.png">
        </div>
      </div>
      <div class="tubox">
        <div class="tu1">
            <img class="tu1" src="../../assets/img/images/sort4.png">
            <img class="tu2" src="../../assets/img/images/sort-txt4.png">
        </div>
         <div class="tu1">
            <img class="tu1" src="../../assets/img/images/sort5.png">
            <img class="tu2" src="../../assets/img/images/sort-txt5.png">
        </div>
         <div class="tu1">
            <img class="tu1" src="../../assets/img/images/sort6.png">
            <img class="tu2" src="../../assets/img/images/sort-txt6.png">
        </div>
      </div>
      <div class="tubox">
        <div class="tu1">
            <img class="tu1" src="../../assets/img/images/sort7.png">
            <img class="tu2" src="../../assets/img/images/sort-txt7.png">
        </div>
         <div class="tu1">
            <img class="tu1" src="../../assets/img/images/sort8.png">
            <img class="tu2" src="../../assets/img/images/sort-txt8.png">
        </div>
         <div class="tu1">
            <img class="tu1" src="../../assets/img/images/sort9.png">
            <img class="tu2" src="../../assets/img/images/sort-txt9.png">
        </div>
      </div>
       <img class="bei2" src="../../assets/img/images/banner6.jpg" alt="">
       <div class="kong2"></div>
    </div>
</template>

<script>
    import TabBar from '../public/Public'
    export default {
        name: "FenNei",
         data(){
          return{
            isFixed:true,
          }
        },
        components:{
          TabBar
        }
    }
</script>

<style scoped>
  header{
    border-color: #111;
    background-color: #581513;
    color: #fff;
  }
  .kong{
    height:40px;
    position: relative;
  }
  .kong2{
    height:36px;
  }
   .swipe{
    height:156px;
  }
  .lunbo{
    height:156px;
  }
 .tubox{
    padding: 0 4px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    align-content: stretch;
    flex-wrap: nowrap;
 }
 .tu1{
  display: block;
  width:100px;
  padding-top:10px;
  padding-left:5px;
  padding-right:10px;
 }
 .tu2{
  display: block;
  width:100px;
  padding-top:5px;
  padding-left: 6px;
 }
  .bei2{
    width:100%;
    display:inline-block;
    padding-bottom: 20px;
    padding-top:10px;
  }
</style>
